import { Component, Prop, Watch, Emit  } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import type { FormItemDto } from '../types'
import { Button, Input, message } from 'ant-design-vue'
import { MinusOutlined , PlusOutlined } from '@ant-design/icons-vue'
import { h } from 'vue'
@Component
export class InputListView extends Render {
    @Prop() formData?: FormItemDto
    @Prop() modelValue?: string
    valueList = [] as string[]

    exitLength = -1

    @Watch('modelValue', { immediate:true, deep: true })
    handleWatchShow(newval: string[]) {
        this.valueList = newval ? [...newval] : ['']
        if ( this.exitLength === -1) {
            this.exitLength = this.valueList.length
        }
    }
    @Emit('change')
    handleChange() {
        this.emitUpdate()
        return this.valueList
    }
    @Emit('update:modelValue')
    emitUpdate() {
        return this.valueList
    }
    onAdd(index: number) { 
        if (this.valueList.length === (this.formData?.params?.maxNum || 10)) {
            message.warning(`最多添加 ${(this.formData?.params?.maxNum || 10)}项`)
            return
        }
        this.valueList.splice((index + 1), 0, '')
        this.handleChange()
    }
    onDel(index: number) { 
        console.log(index, 'indexindex')
        if (this.valueList.length === (this.formData?.params?.minNum || 1)) {
            message.warning(`至少保留${ (this.formData?.params?.minNum || 1) }项`)
            return
        }
        this.valueList.splice(index, 1)
        this.handleChange()
    }
    render() {
        return (
            <div>
                {
                    this.valueList.map((item: string, index:number) => { 
                        return (
                            <div class={ [ index !== this.valueList.length - 1 ? 'mb-2' : ''] }>
                                <div class="flex">

                                    <Input
                                        v-model:value={ this.valueList[index] }
                                        placeholder={this.formData?.placeholder || '请输入'}
                                        onInput={this.handleChange.bind(this)}
                                        class="reset-el-input"
                                        disabled={this.formData?.params?.disableAll || (this.formData?.params?.disabled && index<this.exitLength)}
                                        maxlength={ this.formData?.params?.maxLength }
                                        // v-slots={{
                                        //     suffix: () => {
                                        //         return (
                                    
                                        //         )
                                        //     },
                                        // }}
                                    />
                                    <div class="flex gap-4px ml-5px">
                                        {
                                            this.formData?.params?.type === 'singly' && index === this.valueList.length - 1 ? 
                                                <Button onClick={() =>  
                                                    this.onAdd(index)
                                                } icon={h(PlusOutlined)} disabled={this.formData?.params?.disableAllPlus || (this.formData?.params?.disablePlus && index<this.exitLength)}></Button>

                                                : <></>
                                        }
                                        {
                                            this.formData?.params?.type ? <></> : 
                                                <Button onClick={() =>  
                                                    this.onAdd(index)
                                                } icon={h(PlusOutlined)} disabled={this.formData?.params?.disableAllPlus || (this.formData?.params?.disablePlus && index<this.exitLength)}></Button>
                                        }
                                        <Button onClick={() =>  
                                            this.onDel(index)
                                        } icon={h(MinusOutlined)} disabled={this.formData?.params?.disableAllMinus || (this.formData?.params?.disableMinus && index < this.exitLength)}></Button>
                                    </div>
                                </div>

                            </div>
                        )
                    })
                }
            </div>
            
        )
    }
}

export default toNative<{formData?:FormItemDto}, {change: () => string[]}>(InputListView)